<template>
  <div>
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="70px"
        >
          <el-row>
            <el-col :span="8">
              <div class="grid-content ep-bg-purple" />
              <el-form-item label="方案名称" prop="strategyName">
                <el-input
                  v-model="queryParams.strategyName"
                  @change="getList"
                  placeholder="请输入方案名称"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button @click="handleQuery" type="primary">
                  <span>查询</span>
                </el-button>
                <el-button @click="resetQuery" plain>
                  <span>重置</span>
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="grid-content ep-bg-purple-light" />
            </el-col>
            <el-col :span="8" style="display: flex; justify-content: flex-end">
              <el-form-item>
                <el-button @click="handleAdd('add')" type="primary">
                  <span>添加</span>
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-alert title="数据可能存在延迟，请使用重置或查询按钮刷新" type="info"> </el-alert>
        <el-table v-loading="loading" :data="dataList">
          <el-table-column
            label="方案名称"
            align="center"
            key="strategyName"
            prop="strategyName"
          />
          <el-table-column
            v-if="false"
            label="设备"
            align="center"
            key="deviceInfo"
            prop="deviceInfo"
          >
            <template #default="scope">
              <span v-for="(item, index) in scope.row.deviceInfo">
                <span v-if="index > 0 && index < scope.row.deviceInfo.length">
                  ,
                </span>
                <span>{{ item.deviceName }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="播放间隔（s）"
            align="center"
            key="intervalTime"
            prop="intervalTime"
          />
          <el-table-column
            label="创建时间"
            align="center"
            key="createTime"
            prop="createTime"
          />
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            align="center"
            width="310"
          >
            <template #default="scope">
              <div style="width: 100%">
                <el-button
                  v-if="false"
                  class="btn-blue"
                  size="small"
                  plain
                  @click="goDispatchRecord(scope.row, scope.$index)"
                  >下发记录
                </el-button>
                <el-button
                  class="btn-blue"
                  size="small"
                  plain
                  @click="handleAdd('edit', scope.row, scope.$index)"
                  >编辑
                </el-button>
                <el-button
                  class="btn-red"
                  size="small"
                  plain
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page="queryParams.pageNum"
          :limit="queryParams.pageSize"
          :pageSizes="[10,20,50]"
          @pagination="getList"
        />
        
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import {deleteTrafficRule} from "@/api/record";
import { deleteMedia, queryMediaList } from "@/api/media-services";

export default {
  data() {
    return {
      dataList: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        strategyName: "",
        beginTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    handleDispatch(row, index) {
      this.$emit("handleDispatch", row, index);
    },
    handleAdd(type, row, index) {
      let arr = [];
      let title = "";
      switch (type) {
        case "add":
          title = "添加";
          break;
        default:
          title = "编辑";
          arr = row;
          break;
      }``
      this.$emit("handleAdd", {
        row: row,
        index: index,
        title: title,
        arr: arr,
      });
    },
    getList(val) {
      this.loading = true;
      console.log('val',val)
      if(val){
        this.queryParams.pageNum = val.page
        this.queryParams.pageSize = val.limit
      }
      queryMediaList(this.queryParams).then((res) => {
        // console.log('res',res.data)
        this.loading = false;
        this.dataList = res.data;
        this.total = res.count || 0;
      });
    },
    handleQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        strategyName: this.queryParams.strategyName ? this.queryParams.strategyName : "",
        beginTime: "",
        endTime: "",
      };
      this.getList();
    },
    resetQuery() {
      // proxy.resetForm("queryRef");
      this.queryParams = {};
      this.handleQuery();
    },
    handleDelete(row) {
      this.$confirm(`确定要删除"${row.strategyName}"吗?`)
        .then(() => {
          deleteMedia({ mediaId: row.mediaId }).then((res) => {
            res ? this.msgSuccess("删除成功") : "";
            this.getList();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>


